<script setup lang="ts">
import {reactive, ref, unref} from "vue";
import {Check, Close} from "@element-plus/icons-vue";
import type {FormInstance} from "element-plus";
import {ftpStorage} from "@/storage";
import {ElMessage} from "element-plus";
import {findTree, generateUUID} from "@/utils";


const formRef = ref<FormInstance>()
const dialogVisible = ref(false)

// const rules = reactive<FormRules>({
//   host: [{required: true, message: '请输入IP', trigger: 'blur'}],
//   port: [{required: true, message: '请输入端口', trigger: 'blur'}],
//   username: [{required: true, message: '请输入账户', trigger: 'blur'}],
//   password: [{required: true, message: '请输入密码', trigger: 'blur'}],
//   system: [{required: true, message: '请选择系统', trigger: 'blur'}],
// })

const form = reactive<DeployFtpType>({
  id: '',
  title: '',
  host: "192.168.0.147",
  port: 22,
  username: "root",
  password: "hrz81788178.com",
  system: 'linux'
})

const open = (row?: DeployFtpType) => {
  if (row) {
    form.id = row.id
    form.host = row.host
    form.port = row.port
    form.title = row.title
    form.username = row.username
    form.password = row.password
    form.system = row.system

    if (row.children) form.children = JSON.parse(JSON.stringify(row.children))
    else delete form.children
  } else {
    form.id = ''
    form.port = 22
    form.host = ''
    form.title = ''
    form.username = 'root'
    form.password = ''
    form.system = 'linux'
    delete form.children
  }
  dialogVisible.value = true
}

const onSubmitForm = () => {
  if (form.id) {
    if (!form.title) form.title = form.host || '匿名'
    const item = findTree(unref(ftpStorage), item => item.id === form.id)
    if (item) {
      const editForm: WebType = JSON.parse(JSON.stringify(form))
      // @ts-ignore
      for (const k in form) item[k] = editForm[k];
      ElMessage.success('编辑成功')
    }
  } else {
    if (!form.title) form.title = form.host || '匿名'
    form.id = generateUUID()
    ftpStorage.value.push(JSON.parse(JSON.stringify(form)))
    ElMessage.success('新增成功')
  }
  dialogVisible.value = false
}

defineExpose({open})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="form.id ? form.title : '服务器新增'" width="500" top="10px"
             :close-on-click-modal="false">
    <el-form ref="formRef" :model="form" label-width="100" class="mr10">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" autocomplete="off" placeholder="请输入标题" clearable/>
      </el-form-item>
      <el-form-item label="系统" prop="system">
        <el-select v-model="form.system" placeholder="选择系统">
          <el-option label="Linux" value="linux"/>
          <el-option label="Windows" value="window"/>
        </el-select>
      </el-form-item>
      <el-form-item label="IP" prop="host">
        <el-input v-model="form.host" autocomplete="off" placeholder="请输入IP" clearable/>
      </el-form-item>
      <el-form-item label="端口" prop="port">
        <el-input-number v-model="form.port" autocomplete="off" placeholder="端口"/>
      </el-form-item>
      <el-form-item label="账户名称" prop="username">
        <el-input v-model="form.username" autocomplete="off" placeholder="请输入账户名称" clearable/>
      </el-form-item>
      <el-form-item label="账户密码" prop="password">
        <el-input v-model="form.password" autocomplete="off" placeholder="请输入账户密码" clearable type="password"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" :icon="Close">取消</el-button>
        <el-button type="primary" @click="onSubmitForm" :icon="Check">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
